<template>
	<view class="header-main" :style="{
		paddingTop: navigateHeight ? (navigateHeight + 30) + 'rpx' : '30rpx'
	}">
		<view>
			<view v-if='showback' class="head-3-box flexcenter">
				<view class="head-3 flexcenter" @click="backFun">
					<u-icon name="arrow-left" color="#6C6C69" size="24"></u-icon>
				</view>
			</view>
			<view v-else style="min-height: 80rpx;">
				<p></p>
			</view>
		</view>
		<image @click="openPopup" class="head-3" src="/static/customericon.png" mode=""></image>
		<uni-popup ref="customerPopup" type="center" :animation="false" :is-mask-click="false">
			<view class="customerPopup">
				<u-icon @click="closePopup()" class="iconposition" name="close-circle-fill" color="#86A8E7"
					size="24"></u-icon>
				<view style="border-bottom: 4rpx dashed #86A8E7; padding-bottom: 20rpx;" class="flexrowspacebetween">
					<image src="../static/custicon.png" mode=""></image>
					<view v-if="custInfo.qsxs" class="infos">
						<view v-for="(item,index) in custInfo.qsxs" :key="index" style="margin-top: 10rpx;"
							class="flexrowspacebetween">
							<p>{{$t('phone')}}</p>
							<!-- หมายเลขโทรศัพท์ -->
							<p v-if="currentlang=='es'">+52 {{item.cjfu}}</p>
							<p v-else>+66 {{item.cjfu}}</p>
						</view>
					</view>
				</view>
				<view v-if="custInfo.nnkh">
					<view class="email flexrowstart" v-for="(item,index) in custInfo.nnkh" :key="index">
						<p>{{$t('email')}}:</p>
						<p :key="index">{{item.cjfu}}</p>
					</view>
				</view>

				<view v-if="custInfo.uskb">
					<view class="email flexrowstart" v-for="(item,index) in custInfo.uskb" :key="index">
						<p v-if="item.cjfu">Line:</p>
						<p :key="index">{{item.cjfu}}</p>
					</view>
				</view>

				<view v-if="custInfo.ibrc">
					<view class="fb flexrowstart" v-for="(item,index) in custInfo.ibrc" :key="index">
						<p v-if="item.cjfu">Facebook:</p>
						<p :key="index">{{item.cjfu}}</p>
					</view>
				</view>
				<view class="P-time">
					9:00 AM TO 18:00 PM
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import api from '@/pages/utils/api.js';
	export default {
		name: "customerhead",
		data() {
			return {
				navigateHeight: '',
				custInfo: {},
				currentlang: 'th',
			};
		},
		props: {
			showback: {
				type: Boolean,
				default: false
			},
		},
		created() {
			console.log('shoubackj', this.showback);
			this.navigateHeight = uni.getStorageSync('navigateHeight') || ""
		},
		methods: {
			backFun() {
				uni.navigateBack({
					delta: 1,
				});
			},
			closePopup() {
				this.$refs.customerPopup.close()
			},
			openPopup() {
				this.currentlang = uni.getLocale()
				api.getcustInfo({}).then((data) => {
					this.custInfo = data
					console.log('拿到的客服信息', this.custInfo);
				})
				this.$refs.customerPopup.open('center')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flexrowspacebetween {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flexrowstart {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.customerPopup {
		width: 88vw;
		height: fit-content;
		padding: 40rpx;
		box-sizing: border-box;
		background-color: #fff;
		color: #222;
		border-radius: 30rpx;
		font-size: 14px;
		position: relative;
		padding-top: 80rpx;

		.iconposition {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}

		.email,
		.fb {
			color: #222;
			margin-top: 20rpx;
		}

		.P-time {
			width: 100%;
			text-align: center;
			color: #EA4C4A;
			margin-top: 20rpx;
		}


		.email p:nth-child(2),
		.fb p:nth-child(2) {
			color: #7F7FD5;
			margin-left: 20rpx;
		}


		.infos {
			width: 86%;
		}

		.infos p:nth-child(1) {
			width: 50%;
		}

		.infos p:nth-child(2) {
			color: #7F7FD5;
		}

		image {
			width: 80rpx;
			height: 80rpx;
		}

		.cust-btn p {
			width: 44%;
			text-align: center;
			padding: 14rpx 10rpx;
			border-radius: 30rpx;
			border: 20rpx;
			box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
			transition: all 0.2s;
			margin-top: 30rpx;
		}

		.cust-btn p:active {
			transform: scale(0.96);
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
		}

		// .cust-btn p:nth-child(1) {
		// 	background-color: #B6B6B6;
		// }

		.cust-btn p:nth-child(1) {
			box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
			background: linear-gradient(to right, #7F7FD5, #86A8E7);
			color: #fff;
		}

	}

	.flexcenter {
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	.header-main {
		width: 100vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: transparent;
		font-size: 38rpx;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: transparent;

		.head-3 {
			width: 50rpx;
			height: 60rpx;
		}
	}

	.head-3-box {
		background-color: rgba(255, 255, 255, 0.40);
		padding: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 30rpx;
		box-shadow: 6rpx 6rpx 12rpx rgba(0, 0, 0, 0.15);
		transition: transform 0.1s ease, box-shadow 0.1s ease;
	}

	.head-3-box:active {
		transform: scale(0.96);
		box-shadow: 3rpx 3rpx 6rpx rgba(0, 0, 0, 0.2);
	}
</style>